<template>
  <div
    class="layout-login"
    :style="{backgroundImage: 'url(' + $store.state.meta.loginBgImg + ')'}"
  >
    <h1 class="title">{{ $store.state.meta.appName }}</h1>
    <nuxt></nuxt> <copyright></copyright>
  </div>
</template>

<script>
import Copyright from '../components/Copyright.vue'
export default {
  name: 'login',
  components: {
    Copyright
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="stylus">
// 参考ant-design pro样式
.layout-login {
  width: 100%;
  min-height: 100%;
  background-color: #f0f2f5;
  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding: 90px 0 0;
  position: fixed;

  .title {
    margin: 0 auto 40px;
    text-align: center;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 500;
    position: relative;
    top: 2px;
  }
  .main {
    width: 368px;
    margin: 0 auto 100px;
  }

  button {
    width: 368px;
  }
}
</style>
